<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程训练</title>
</head>
<body>
    <div class="coursedirll dpflex fdcolumn jcs">
        <!-- 视频盒子 -->
        <div class="videoBox dpflex ret">
            <video src="../imgs/part1.mp4" muted autoplay></video>
            <!-- 课程信息盒子 -->
            <div>
                <p><span class="now">1</span>/ <span class="all">4</span></p>
                <p class="courseTitle">反关节运动</p>
                
            </div>
        </div>

        <!-- 控件盒子 -->
        <div class="controlBox dpflex">
            <p><i class="iconfont icon-vprev"></i></p>
            <p><i class="iconfont icon-play"></i></p>
            <p><i class="iconfont icon-vnext"></i></p>
            <!-- 进度条 -->
            <div class="progress_bar"></div>
        </div>

        <!-- 遮罩层盒子 -->
        <div class="mask dpflex fdcolumn">
            <!-- 心灵鸡汤 -->
            <div class="slogan">
                放弃可以找到一万种理由,坚持只需要一个信念.
            </div>
            <!-- 控制盒子 -->
            <div class="control dpflex">
                <!-- 开始 -->
                <div class="start dpflex fdcolumn">
                    <i class="iconfont icon-pause"></i>
                    <p>继续训练</p>
                </div>
                <!-- 结束 -->
                <div class="end dpflex fdcolumn">
                    <i class="iconfont icon-end"></i>
                    <p>结束训练</p>
                </div>
            </div>

            <!-- 信息盒子 -->
            <div class="message dpflex">
                <img src="../imgs/头像.jpg" alt="">
                <div class="dpflex fdcolumn">
                    <p>当前</p>
                    <p class="courseTitle">反关节运动</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>